<template>
  <div class="detail">
    <!-- 返回按钮 -->
    <div class="header-abs" @click="back">
      <div class="iconfont header-abs-back">&#xe616;</div>
    </div>
    <!-- 商品轮播图 -->
    <div class="focus">
      <cube-slide
        ref="slide"
        :data="goodDetail.goods_imgs"
        :initial-index="0"
        :interval="6000"
      >
        <cube-slide-item v-for="(item, index) in goodDetail.goods_imgs" :key="index">
          <img :src="item" class="focus_img" :itemIndex="index">
        </cube-slide-item>
        <template slot="dots" slot-scope="props">
          <div class="my-dot">{{ props.current + 1 }} / {{goodDetail.goods_imgs.length}}</div>
        </template>
      </cube-slide>
    </div>
    <!-- 商品名称 -->
    <div class="title w">{{ goodDetail.goods_name }}</div>
    <!-- 商品简介 -->
    <div class="introduce w">{{ goodDetail.goods_introduce }}</div>
    <!-- 商品价格与月销量 -->
    <div class="price w">
      <span class="current">¥{{ goodDetail.goods_price }}</span>/{{ goodDetail.goods_pack }}
      <span class="oldPrice">{{ goodDetail.goods_oldprice | priceFilter }}</span>
      <span class="sell_count">月销量 {{ goodDetail.hot_mumber }}件</span>
    </div>
    <!-- 商品详情 -->
    <div class="info w">
      <h3 class="info_title">商品详情</h3>
      <table>
        <tr>
          <td>产地</td>
          <td>{{ goodDetail.goods_region }}</td>
        </tr>
        <tr>
          <td>规格</td>
          <td>{{ goodDetail.goods_spec }}</td>
        </tr>
        <tr>
          <td>重量</td>
          <td>{{ goodDetail.goods_weight }}</td>
        </tr>
        <tr>
          <td>包装</td>
          <td>{{ goodDetail.goods_pack }}</td>
        </tr>
        <tr>
          <td>保质期</td>
          <td>{{ goodDetail.goods_exp }}</td>
        </tr>
        <tr>
          <td>贮存方式</td>
          <td>{{ goodDetail.goods_storage }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Detail',
  data () {
    return {}
  },
  computed: {
    ...mapState(['goodDetail'])
  },
  filters: {
    priceFilter (value) {
      if (value !== 0) return '¥' + value
      return ''
    }
  },
  methods: {
    // 返回上一页
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  position: relative;
  overflow: hidden;
  width: 15rem;
  height: 100%;
  overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
}
// 顶部返回按钮
.header-abs {
  position: absolute;
  left: .4rem;
  top: .4rem;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  border-radius: .7rem;
  text-align: center;
  background: rgba(139, 139, 122, 0.6);
  z-index: 99;
  .header-abs-back {
    color: #fff;
    font-size: .72rem;
  }
}
// 轮播图
.focus {
  overflow: hidden;
  width: 100%;
  .cube-slide-group {
    width: 100%;
    .focus_img {
      width: 100%;
    }
  }
}
/deep/ .cube-slide-dots {
  line-height: 1rem;
  font-size: .48rem;
  text-align: center;
  color: #fff;
}
/deep/ .my-dot{
  position: absolute;
  bottom: .3rem;
  right: .4rem;
  height: .8rem;
  line-height: .8rem;
  padding: 0 .28rem;
  background: rgba(139, 139, 122, .6);
  border-radius: .4rem;
}
// 标题
.title {
  font-size: .8rem;
  font-weight: 500;
  margin: 0.2rem 0;
}
// 介绍
.introduce {
  font-size: .56rem;
  color: #999;
}
// 价格区域
.price {
  position: relative;
  width: 100%;
  line-height: .8rem;
  font-size: .56rem;
  margin: .4rem 0;
  .current {
    font-size: .8rem;
    color: rgb(255, 20, 147);
  }
  .oldPrice {
    text-decoration: line-through;
    color: #999;
    padding-left: .2rem;
  }
  .sell_count {
    position: absolute;
    right: 1rem;
    color: #999;
  }
}
// 商品详情
.info {
  width: 100%;
  .info_title {
    font-size: .72rem;
    font-weight: 600;
  }
  table {
    width: 100%;
    font-size: .56rem;
    border: 1px solid #eee;
    border-radius: .2rem;
    margin-top: .4rem;
    tr {
      line-height: 1.6rem;
      border-bottom: 1px solid #eee;
      td:first-child {
        width: 3.2rem;
        color:#999;
        padding-left: .4rem;
      }
    }
  }
}
</style>
